<template>
  <div ref="status" id="ct-status"></div>
</template>

<script>
import Highcharts from "highcharts/highstock";
import HighchartsMore from "highcharts/highcharts-more";
HighchartsMore(Highcharts);
export default {
  name: "ctStatus",
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {
    getData() {
      // 基本配置
      let padding = 20,
        width = 300,
        height = 50,
        min = 0,
        max = 25,
        tickInterval = 5,
        minorTickInterval = 5,
        stops = [
          [0, "低危", "#ff0000"],
          [0.4, "中危", "#ffff00"],
          [0.6, "高危", "#ffff00"],
          [1, "", "#00ff00"]
        ];
      let renderer = new Highcharts.Renderer(this.$refs.status, width, height);
      // 1. 绘制渐变颜色条
      let linearGradientOptions = {
        tagName: "linearGradient",
        id: "gradient-0",
        x1: 0,
        y1: 0,
        x2: 1,
        y2: 0,
        children: []
      };
      stops.forEach(stop => {
        linearGradientOptions.children.push({
          tagName: "stop",
          offset: stop[0],
          "stop-color": stop[2]
        });
      });
      renderer.definition(linearGradientOptions);
      // 创建背景颜色条
      let background = renderer.g("background").add();
      let bgProperties = {
        x: padding,
        y: height - 2 * padding,
        width: width - 2 * padding,
        height: 14
      };
      renderer
        .rect(
          bgProperties.x,
          bgProperties.y,
          bgProperties.width,
          bgProperties.height
        )
        .attr({
          fill: "url(#" + linearGradientOptions.id + ")",
          r: 7
        })
        .add(background);
      // 渲染渐变颜色条文字
      stops.forEach((stop, index) => {
        if (index === stops.length - 1) {
          return false;
        }
        let start = stop[0],
          end = stops[index + 1][0],
          text = start * 25 + "-" + end * 25 + stop[1],
          position = start + (end - start) / 2,
          textAnchor = "middle";
        if (start === 0) {
          position = start;
          textAnchor = "start";
        } else if (end === 1) {
          position = end;
          textAnchor = "end";
        }
        renderer
          .text(
            text,
            bgProperties.x + bgProperties.width * position,
            height - padding / 2
          )
          .css({
            color: "#555",
            fontSize: "10px",
            "text-anchor": textAnchor
          })
          .add(background);
      });
      // 2. 绘制 x 轴（刻度）
      let xAxis = renderer.g("xAxis").add(),
        start = min,
        paths = [];
      while (start <= max) {
        let isMainTick = start % tickInterval === 0,
          x = bgProperties.x + (bgProperties.width * start) / max,
          y = bgProperties.y - (isMainTick ? 8 : 3);
        paths.push("M");
        paths.push(x);
        paths.push(bgProperties.y);
        paths.push("L");
        paths.push(x);
        paths.push(y);
        if (isMainTick) {
          renderer
            .text(start, x, y - 5)
            .css({
              color: "#888",
              fontSize: "10px",
              "text-anchor": "middle"
            })
            .add(xAxis);
        }
        start += minorTickInterval;
      }
      renderer
        .path(paths)
        .attr({
          stroke: "#888",
          "stroke-width": 1
        })
        .add(xAxis);
      // 3. 绘制当前游标
      let currentVal,
        cursor = renderer
          .g("cursor")
          .attr()
          .add(),
        cursorHeight = 30,
        cursorLine = renderer
          .path([
            "M",
            bgProperties.x,
            bgProperties.y,
            "L",
            bgProperties.x,
            bgProperties.y - cursorHeight
          ])
          .attr({
            stroke: "#333",
            "stroke-width": 1,
            opacity: 0
          })
          .add(cursor),
        cursorText = renderer
          .text(0, bgProperties.x, bgProperties.y - cursorHeight + 8)
          .css({
            color: "#d8ff00",
            fontSize: "14px",
            "text-anchor": "start",
            opacity: 0
          })
          .add(cursor);
      // 4. 更新值
      function setValue(val) {
        if (currentVal === val || val < min || val > max) {
          return false;
        }
        currentVal = val;
        let x = bgProperties.x + (val / max) * bgProperties.width;
        cursorLine.attr({ opacity: 1 });
        cursorLine.animate({
          d: ["M", x, bgProperties.y, "L", x, bgProperties.y - cursorHeight]
        });
        cursorText
          .attr({
            text: val
          })
          .css({ opacity: 1 });
        cursorText.animate({
          x: x + 4
        });
      }
      setValue(15);
    }
  },
  created() {
  },
  mounted() {
    this.getData();},
  destroyed() {}
};
</script>
<style lang='scss' scoped>
#ct-status {
//   width: 100% !important;
//   height: 300px;
  background: #fff;
  margin: 0 auto;
}
</style>